<template>
    <div class="out-container" ref="outContainer">
        <img :src="props.outBg" alt="" v-if="props.outBg" style="width: 100%;min-width: 1400px;">
        <div class='main-content' ref="MainContentPc">
            <div class="main">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    // 背景图片
    bg: {
        type : String,
    },
    outBg: {
        type : String,
    }
})
const MainContentPc:Ref<HTMLElement | null> = ref(null)
const outContainer:Ref<HTMLElement | null> = ref(null)
onMounted(()=>{
    // if(props.outBg && outContainer.value){
    //     outContainer.value.style.background = `url(${props.outBg}) no-repeat center center / cover`;
    // }
    if(props.bg && MainContentPc.value){
        MainContentPc.value.style.background = `url(${props.bg}) no-repeat center center`;
    }
})
</script>


<style lang="scss" scoped>
.out-container{
    width: 100%;
    height: 100%;
    .main-content{
        height: 100%;
		min-width: 1358px;
        max-width: 1920px;
        margin:0 auto;
        .main{
            height: 100%;
            margin:0 auto;
            max-width: 1358px;
        }
    }
}
</style>